<template>
    <div class="goodsinfo-container">

        <!-- 点击购物车时,出现抛小球动态 -->
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>

        <!-- 轮播图区域 -->
        <div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
                    <swipe :lunbotuList="lunbotu" :isfull="false"></swipe>
				</div>
			</div>
		</div>
        <!-- 商品购买区域 -->
        <div class="mui-card">
			<div class="mui-card-header">{{goodsinfo.title}}</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="price">
                        市场价:<del>¥{{goodsinfo.market_price}}</del>&nbsp;&nbsp;销售价:<span class="now_price">￥{{goodsinfo.sell_price}}</span>
                    </p>
                    <p>购买数量:<numbox @getCount="getSelectedCount" :max="goodsinfo.stock_quantity"></numbox></p>	
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
                        <!-- 如何实现加入购物车的时候,拿到选择的数量 -->

                    </p>
				</div>
			</div>
		</div>

        <!-- 商品参数区域 -->
        <div class="mui-card">
			<div class="mui-card-header">商品参数</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
                    <p>商品货号:{{goodsinfo.goods_no}}</p>
                    <p>库存情况:{{goodsinfo.stock_quantity}}</p>
                    <p>上架时间:{{goodsinfo.time}}</p>
				</div>
			</div>
			<div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="getDesc(id)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="getComment(id)">商品评论</mt-button>
            </div>
		</div>

    </div> 
</template>

<script>
    // 导入 轮播图 组件
    import swipe from '../subcomponents/swiper.vue'
    //导入 数字选择框 组件
    import numbox from '../subcomponents/goods_numbox.vue'
    import { Toast } from 'mint-ui'
    export default{
        data() {
            return {
                id:this.$route.params.id,//将url地址中传递的id值挂载到data上,方便调用
                lunbotu:[],
                goodsinfo : {
                    id:1,
                    title:"商品详情",
                    goods_no:"SD2000909809",
                    time:"2019-02-22 12:20:33",
                    stock_quantity:60,
                    sell_price:2699,
                    market_price:2999
                },//商品对象
                ballFlag:false, //控制小球隐藏和显示的标识
                selectedCount:1 //保存用户选择的商品数量,默认传一件
            }
        },
        created() {
    //         this.getLunbotu();
    //         this.getGoodsInfo()
        },
        methods: {
            getLunbotu(){
                this.$http.get(''+this.id).then(result=>{
                    if(result.body.status == 0){
                        //先循环轮播图数组的每一项,为item添加img属性(有可能因为名称起的不匹配item.img,不认识item.src)
                        //看数据提供做选择
                        // result.body.message.forEach(item => {
                        //     item.img = item.src
                        // });
                        this.lunbotu = result.body.message;
                    }else{
                        Toast('获取新闻详情数据失败')
                    }
                })
            },
            getGoodsInfo(){ 
                //获取数据的方法
                this.$http.get('api/goods/getinfo/'+this.id).then(result=>{
                    if(result.body.status == 0){
                        this.goodsinfo = result.body.message[0];
                    }else{
                        Toast('获取商品详情数据失败')
                    }
                })
            },
            getDesc(id){//图文介绍
                this.$router.push({name:'goodsdesc',params:{id}});
            },
            getComment(id){//商品评论
                this.$router.push({name:'goodscommet',params:{id}});
            },
            addToShopCar(){//添加到购物车
                this.ballFlag = !this.ballFlag;
                //将商品信息拼接保存到store中的car数组里 的商品信息对象
                var goodsinfo = {
                    id:this.id,
                    count:this.selectedCount,
                    price:this.goodsinfo.sell_price,
                    selected:true
                };
                //调用
                this.$store.commit('addToCar',goodsinfo);
            },
            beforeEnter(el){
                el.style.transform = "translate(0,0)"
            },
            enter(el,done){
                el.offsetWidth;
                //获取小球在页面中的位置
                const ballPosition = this.$refs.ball.getBoundingClientRect();
                //获取徽标在页面中的位置
                const badgePosition = document.getElementById('badge').getBoundingClientRect();
                
                const xDist = badgePosition.left - ballPosition.left;
                const yDist = badgePosition.top - ballPosition.top;

                el.style.transform = `translate(${xDist}px,${yDist}px)`;
                el.style.transition = "all 1s cubic-bezier(.4,-0.3,1,.68)"
                done();
            },
            afterEnter(el){
                 this.ballFlag = !this.ballFlag;
            },
            getSelectedCount(count){
                this.selectedCount = count ;
            }
        },
        components:{//用来注册子组件的节点
             swipe,
             numbox
        }
    }
</script>

<style lang="scss">
    .goodsinfo-container{
        background-color: #eee;
        overflow: hidden;
        // padding: 0 4px; //上下不给,左右4像素
        .now_price{
            font-size: 16px;
            font-weight: bold;
            color: red;
        }
        .mui-card-footer{
            display: block;
            button{
                margin: 15px 0;
            }
        }

        .ball{
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
            position:absolute;
            z-index: 99;
            top:390px;
            left: 137px;
        }
    }
</style>